<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jstl/core"
                template="./../templates/StakeholderPortalTemplate.xhtml">

    <link href="./../resources/css/default.css" rel="stylesheet" type="text/css" />
    <link href="./../resources/css/tableLayout.css" rel="stylesheet" type="text/css" />

    <ui:define name="content">
        <h:form>
            <f:view beforePhase="#{mediaManagedBean.initView}">
                <h:form>
                    <p:panel id="branchAddNewBranchPanel" header="#{bundle['stakeholder.viewmedia.leftnav']}">

                        <h:panelGrid columns="1" cellpadding="10">
                            <h:outputLabel id="viewMediaNotes" style="font-weight: bold; font-size: smaller; color: red" value="#{bundle['stakeholder.viewmedia.note']}" />
                        </h:panelGrid>

                        <h:panelGrid columns="1" cellpadding="2" cellspacing="4" width="100%" id="imageListPanelGrid" >
                            <p:lightBox>
                                <table>
                                    <tr> 
                                        <ui:repeat value="#{mediaManagedBean.imageList}" var="image" id="imageList" varStatus="status">      
                                            <td>
                                                <p>
                                                    <h:outputLink value="..#{image.imageUrl}" >
                                                        <h:graphicImage id="imagePreview" value="#{image.imageUrl}" style="border-color: black; border-style:solid; width: 180px; height: 130px"/>
                                                    </h:outputLink>
                                                </p>
                                                <p></p>
                                                <p>
                                                    <p:inputText style="font-weight: bold; width:170px" disabled="true" id="caption" value="#{image.caption}"/>      
                                                </p>
                                            </td>   
                                            <h:outputText value="&lt;/tr&gt;&lt;tr&gt;" escape="false" rendered="#{(status.index + 1 ) mod 5 eq 0}"/>

                                        </ui:repeat>
                                    </tr>   
                                </table>
                            </p:lightBox>
                        </h:panelGrid>
                    </p:panel>
                </h:form>
            </f:view>
        </h:form>
    </ui:define>
</ui:composition>
